<template>
  <div class="business-terms-container">
    <div class="search-bar">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入关键词搜索业务术语"
        clearable
        @keyup.enter="searchTerms"
        style="width: 300px;"
      />
      <el-button type="primary" @click="searchTerms">搜索</el-button>
      <el-button type="default" @click="refreshTerms">刷新</el-button>
    </div>

    <el-form :inline="true" @submit.native.prevent="addTerm" class="term-form">
      <el-form-item label="术语名称" class="name-item">
        <el-input v-model="newTerm.name" placeholder="请输入术语名称"></el-input>
      </el-form-item>
      <el-form-item label="术语描述" class="description-item">
        <el-input v-model="newTerm.description" type="textarea" :rows="3" placeholder="请输入术语描述"></el-input>
      </el-form-item>
      <el-form-item class="button-item">
        <el-button type="primary" @click="addTerm">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="terms" style="width: 100%">
      <el-table-column prop="name" label="术语名称"></el-table-column>
      <el-table-column prop="description" label="术语描述"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="openEditDialog(scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="deleteTerm(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 16px; text-align: right;">
      <el-button :disabled="currentPage === 0 || isLoading" @click="prevPage">上一页</el-button>
      <el-button :disabled="!hasNextPage || isLoading" @click="nextPage">下一页</el-button>
    </div>

    <el-dialog v-model="editDialogVisible" title="修改业务术语" width="800px">
      <el-form :model="editingTerm" label-width="80px">
        <el-form-item label="术语名称" class="edit-name-item">
          <el-input v-model="editingTerm.name"></el-input>
        </el-form-item>
        <el-form-item label="术语描述">
          <el-input v-model="editingTerm.description" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateTerm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';

const terms = ref([]);
const newTerm = ref({
  name: '',
  description: ''
});

const editDialogVisible = ref(false);
const editingTerm = ref({
  id: null,
  name: '',
  description: ''
});

const API_URL = '/api/business-terms';
const searchKeyword = ref('');

const currentPage = ref(0);
const pageSize = 20;
const hasNextPage = ref(false);
const isLoading = ref(false);

const fetchTerms = async (keyword = '', page = 0) => {
  isLoading.value = true;
  try {
    const response = await axios.get(API_URL + "/get", {
      params: {
        keyword: keyword || undefined,
        page: page,
        size: pageSize
      }
    });
    terms.value = response.data.data;
    hasNextPage.value = response.data.hasNext;
  } catch (error) {
    ElMessage.error('获取业务术语列表失败');
    console.error(error);
  } finally {
    isLoading.value = false;
  }
};

const searchTerms = () => {
  currentPage.value = 0;
  fetchTerms(searchKeyword.value, 0);
};

const refreshTerms = () => {
  searchKeyword.value = '';
  currentPage.value = 0;
  fetchTerms('', 0);
};

const addTerm = async () => {
  if (!newTerm.value.name || !newTerm.value.description) {
    ElMessage.warning('术语名称和描述不能为空');
    return;
  }
  try {
    await axios.post(API_URL + "/add", newTerm.value);
    ElMessage.success('新增成功');
    newTerm.value.name = '';
    newTerm.value.description = '';
    setTimeout(() => {
      currentPage.value = 0;
      fetchTerms('', 0);
    }, 500);
  } catch (error) {
    ElMessage.error('新增失败');
    console.error(error);
  }
};

const openEditDialog = (term) => {
  editingTerm.value = { ...term };
  editDialogVisible.value = true;
};

const updateTerm = async () => {
  if (!editingTerm.value.name || !editingTerm.value.description) {
    ElMessage.warning('术语名称和描述不能为空');
    return;
  }
  try {
    await axios.put(`${API_URL}/${editingTerm.value.id}`, editingTerm.value);
    ElMessage.success('修改成功');
    editDialogVisible.value = false;
    setTimeout(() => {
      currentPage.value = 0;
      fetchTerms('', 0);
    }, 500);
  } catch (error) {
    ElMessage.error('修改失败');
    console.error(error);
  }
};

const deleteTerm = async (id) => {
  try {
    await axios.delete(`${API_URL}/${id}`);
    ElMessage.success('删除成功');
    setTimeout(() => {
      currentPage.value = 0;
      fetchTerms('', 0);
    }, 500);
  } catch (error) {
    ElMessage.error('删除失败');
    console.error(error);
  }
};

const prevPage = () => {
  if (currentPage.value > 0) {
    currentPage.value--;
    fetchTerms(searchKeyword.value, currentPage.value);
  }
};
const nextPage = () => {
  if (hasNextPage.value) {
    currentPage.value++;
    fetchTerms(searchKeyword.value, currentPage.value);
  }
};

onMounted(() => {
  fetchTerms();
});
</script>

<style scoped>
.business-terms-container {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.term-form {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 10px;
}

.name-item {
  width: 300px;
  margin-right: 0 !important;
}

.description-item {
  flex: 1;
  margin-right: 0 !important;
}

.button-item {
  margin-right: 0 !important;
}

.edit-name-item {
  width: 300px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 0;
}

:deep(.el-textarea__inner) {
  font-family: inherit;
}
</style> 